<template>
	<div id="top_list">
		<ul>
			<li v-for="(item,index) in toplist" :key="index">
				<div class="img">
					<img :src="item.pic" width="100%">
				</div>
				<p>{{ item.cate_name }}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: {
			toplist: {
				typeof: Array,
				default: () => {
					return []
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#top_list {
		width: 100%;

		ul {
			width: 95%;
			background-color: #fff;
			padding: 10 * $width 0;
			margin: 10 * $width 2.5%;
			display: flex;
			flex-wrap: wrap;
			border-radius: 8 * $width;

			li {
				width: 70 * $width;
				margin: 5 * $width 0 * $width;
				display: flex;
				flex-direction: column;
				align-items: center;

				.img {
					width: 45 * $width;
					height: 45 * $width;

					img {
						width: 100%;
					}
				}

				p {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 12 * $width;
					text-align: center;
					margin-top: 7 * $width;
				}
			}
		}
	}
</style>
